<template>
	<view class="login-container">
		<!-- 登录表单区域 -->
		<view class="login-form">
			<view class="login-title c-f-r">
				<text>登录</text>
			</view>
			<!-- 登录盒子区域 -->
			<view class="login-box">
				<u-form labelPosition="left"  ref="form1" :model="loginForm">
					<u-form-item ref="item1">
						<u-input v-model="loginForm.username" placeholderStyle="color: #706868" border="surround" shape="circle" prefixIcon="account" placeholder="请输入用户名"></u-input>
					</u-form-item>
					<u-form-item ref="item1">
						<u-input type="password" v-model="loginForm.password" placeholderStyle="color: #706868" border="surround" shape="circle" prefixIcon="lock-open" placeholder="请输入密码"></u-input>
					</u-form-item>
				</u-form>
				<u-button @click="login" text="登录" color="#F7E522" style="color: #000000;font-weight: bold;margin-top: 40rpx;"></u-button>
				<!-- 注册按钮 -->
				<navigator class="register c-f-c" url="./register">
					<text>注册</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {userLogin} from "@/api/login.js"
	import {TOAST} from "@/utils/utils.js"
	export default{
		data(){
			return{
				loginForm:{},
				model1:{},
				userInfo:{}
			}
		},
		methods:{
			login(){
				userLogin({
					username:this.loginForm.username,
					password:this.loginForm.password
				}).then(res=>{
					uni.setStorageSync("token",res.data.token)
					uni.setStorageSync("userId",res.data.id)
					TOAST("登录成功")
					setTimeout(()=>{
						uni.switchTab({
							url:"index/index"
						})
					},2000)
					
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-form-item {
		background: #000000;
		margin-bottom: 20rpx;
	}
	.login-container {
		height: 100%;
		background: url(../static/imgs/login-bg.png) no-repeat;
		background-size: 50% auto;
		background-position: 50% 10%;
		background-color: #1A1A1A;
		z-index: -999999;
		.login-form {
			height: 100%;
			margin: auto 122rpx;
			.login-title{
				padding-top: 60rpx;
				font-size: 48rpx;
			}
			.login-box {
				margin-top: 510rpx;
				.register{
					margin-top: 40rpx;
				}
			}
		}
	}
</style>
